<template>
	<div class="zh-led-management">
		<nav-header></nav-header>
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 100px">
                        <el-select v-model="listParam.equipment_id" filterable placeholder="请选择">
                            <el-option label="全部" value="0" ></el-option>
                            <el-option label="工作" value="1" ></el-option>
                            <el-option label="闲置" value="2" ></el-option>
                            <el-option label="离线" value="3" ></el-option>
                        </el-select>
                    </div>
                    <div class="open-width">
                        <el-input 
                            v-model="listParam.keyword" 
                            placeholder="输入设备名称"
                            @keyup.enter.native="searchFunc">
                        </el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="primary" @click="addEquipment">添加设备</el-button>
                </div>
            </div>

            <div class="zh-table-contents"
                v-loading="loading.status"
                :element-loading-text="loading.txt">
                <div class="zh-table-subject">
                    <el-row :gutter="20">
                        <template  v-for="(item, index) in list_data">
                            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6" :key="index">
                                <el-card shadow="hover">
                                    <div class="card-inner" @click="detailRoute(item)">
                                        <div class="subject-content clear">
                                            <div class="title-subject fl" :title="item.name">
                                                <span>{{item.name}}</span>
                                            </div>
                                            <div class="select-subject fr">
                                                <i class="el-icon-close"  @click.stop="deleteMaterial(item.id)" title="删除"></i>
                                            </div>					
                                        </div>
                                        <div class="chapter-subject">
                                            <div>节目：{{item.program_num}} 个</div>
                                            <div class="status-active" v-if="item.status === 1">工作</div>
                                            <div class="status-idle" v-if="item.status === 2">闲置</div>
                                            <div class="status-offline" v-if="item.status === 3">离线</div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </template>
    
                    </el-row>
                </div>

                <div class="table-pagination" v-show="total_number > 12">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="listParam.page_index"
                        :page-sizes="[12, 24, 36, 48, 60]"
                        :page-size="listParam.page_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog
            title="添加设备"
            :visible.sync="is_add"
            width="500px"
            :before-close="cancelAdd">
            <el-form :model="addForm" :rules="rules" ref="addForm" hide-required-asterisk label-width="100px" class="demo-addForm">
                <el-form-item label="设备名称：" prop="device_name">
                    <el-input v-model="addForm.device_name"></el-input>
                </el-form-item>
                <!-- <el-form-item label="设备IP：">
                    <el-col :span="5">
                        <el-form-item>
                            <el-input type="number" v-model="addForm.ip1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-input type="number" v-model="addForm.ip2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-input type="number" v-model="addForm.ip3"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-input type="number" v-model="addForm.ip4"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item> -->
                <el-form-item label="设备IP：" prop="ip">
                    <el-input v-model="addForm.ip"></el-input>
                </el-form-item>
                <!-- 暂时屏蔽 -->
                <!-- <el-form-item label="屏幕大小：" class="screen-size">
                    <el-col :span="8">
                        <el-form-item label="宽：" prop="width">
                            <el-input type="number" v-model="addForm.width"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2"></el-col>
                    <el-col :span="8">
                        <el-form-item label="高：" prop="height">
                            <el-input type="number" v-model="addForm.height"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelAdd">取 消</el-button>
                <el-button type="primary" @click="saveEqupment('addForm')">确 定</el-button>
            </span>
        </el-dialog>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
                is_add: false,
                total_number: 0, // 数据总素
                list_data:[], // 列表数据
                loading:{
					status:false,
					txt:'获取数据...',
                },
                addForm: {
                    device_name: '',
                    ip: '',
                    width: '',
                    height: '',
                },
		    	listParam:{ // 列表数据参数
		    		equipment_id: '0', // 设备状态
		       		keyword: null,
		       		page_index: 1,
		       		page_size: 12
                },
                rules: {
                    device_name: [
                        { required: true, message: '请输入设备名称', trigger: 'blur' },
                    ],
                    ip: [
                        { required: true, message: '请输入设备IP', trigger: 'blur' },
                        {pattern: this.rules.ip.reg, message: this.rules.ip.msg, trigger: 'blur'}
                    ],
                    width: [
                        { required: true, message: '请输入宽度', trigger: 'blur' },
                    ],
                    height: [
                        { required: true, message: '请输入高度', trigger: 'blur' },
                    ]
                }
		    }
		},
		created(){
			this.getList();
        },
		methods: {
            /**
             * 跳转详情页
             * @param {Object} item 设备详情
             */
            detailRoute(item) {
                this.$router.push('/affairs/led/led-detail/' + item.id);
            },
			searchFunc(){
                this.listParam.page_index = 1;
                
				this.getList();
			},
			reset() {
                this.listParam.equipment_id = '0';
                this.listParam.keyword = null;
                this.listParam.page_index = 1;
                this.listParam.page_size = 12;

				this.getList();
			},
			addEquipment(){
                this.is_add = true;
            },
            /**
             * 清空表单验证
             */
            cancelAdd() {
                this.$refs['addForm'].resetFields();
                this.is_add = false;
            },
            /**
             * 添加一个新设备
             */
            saveEqupment(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = {
                            name: this.addForm.device_name,
                            ip: this.addForm.ip,
                            width: this.addForm.width,
                            height: this.addForm.height,
                        }
                        let success = (res => {
                            this.$message.success(res.msg);
                            this.cancelAdd();
                            this.getList();
                        })

                        this.$ajax.post('api/led/single', params, {func: {success: success}})
                    } else {
                        return false;
                    }
                });
            },
			/**
             * 删除设备
             * @param {String} id ied id
             */
			deleteMaterial(id){
				let yes = (res => {
					let success = ( res=>{
                        this.$message.success(res.msg);

                        if (this.list_data.length == 1 && this.listParam.page_index != 1) {
                            this.listParam.page_index--;
                        }
                                              
	            		this.getList();
                    })
                    
					this.$ajax.delete('api/led/single', {params: {id: id}, func: {success: success}})
				})
                let cancel = ( res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '是否要删除该设备？'});
            },
			/**
             * 获取全部设备
             */
			getList(){
				this.loading.status = true;
            	let success = (res=>{
                    this.loading.status = false;
                    this.list_data = res.data.data;
                    this.total_number = res.data.data_sum;
            	})
            	let fail = (res => {
            		this.loading.status = false;
            		this.$message.error(res.msg);
                })
                let params = {
                    name: this.listParam.keyword,
                    status: this.listParam.equipment_id,
                    page_index: this.listParam.page_index,
                    page_size: this.listParam.page_size
                }

            	this.$ajax.get('api/led/lists', {params: params, func:{success: success, fail: fail}})
            },
		    handleSizeChange(val) {
		     	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		},
  	}
</script>
<style lang="scss">
    .zh-led-management {
        .line {
            text-align: center;
        }
    }
	.zh-led-management,.zh-subject-management {
		.zh-table-contents {
			.zh-table-subject {
				padding-top: 30px;
                border-top: 1px solid #e6e6e6;

				.el-col {
					margin-bottom: 20px;
					.el-card {
						border: 1px solid #e6e6e6;
						cursor: pointer;
						&:hover {
							.title-subject {
								color: #409EFF;
							}
						}
						.el-card__body {
							padding: 0;
						}
						.card-inner {
							padding: 20px;
						}
					}
					.subject-content {
						width: 100%;
						.title-subject {
							width: 90%;
							font-size: 23px;
							font-weight: 600;
							
							
						}
						.select-subject {
							i {
								font-size: 20px;
								color: #999;
								&:hover {
									color: red;
									cursor: pointer;
								}
							}
						}
					}
					.subject-content, .title-subject, .chapter-subject {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.chapter-subject {
                        display: flex;
                        justify-content: space-between;
						margin-top: 10px;
                        padding-top: 20px;
						width: 100%;
                        color: #666;

                        .status {
                            color: red;
                        }
                        
                        .status-active {
                            color: #66b1ff;
                        }

                        .status-idle {
                            color: #FF7777;
                        }

                        .status-offline {
                            color: #666;                            
                        }
					}
				}
			}
        }
    }
    
    .screen-size {
        .el-form-item__content {
            .el-col .el-form-item {
                label {
                    width: 20px !important;
                    text-align: left;
                }

                >div {
                    margin-left: 35px !important;

                    input {
                        width: 100px;
                    }
                }
            }
        }
    }
</style>